<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form ref="dataList2" :inline="true" :model="listQuery" class="demo-form-inline">
            <el-input v-model="listQuery.user_code" class="marginRB10" clearable placeholder="用户ID"
                      style="width:200px;"
            ></el-input>
            <el-input v-model="listQuery.order_no" class="marginRB10" clearable placeholder="订单编号" style="width:200px;"
            ></el-input>
            <el-input v-model="listQuery.anchor_code" class="marginRB10" clearable placeholder="达人ID搜索"
                      style="width:200px;"
            ></el-input>
            <!-- <el-date-picker
              v-model="listQuery.register_time"
              placeholder="选择用户注册时间"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker> -->

            <el-select v-model="listQuery.game_id" clearable placeholder="订单类型">
              <el-option
                v-for="item in options1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select v-model="listQuery.status" clearable placeholder="订单状态">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-button class="marginRB10" el-button icon="el-icon-search" type="primary" @click="searchList">搜索
            </el-button>
            <el-button class="marginRB10" el-button icon="el-icon-search" type="primary" @click="handleReset">重置
            </el-button>
          </el-form>
        </el-row>
      </div>
      <div class="item">
        <el-table ref="dataList" v-loading="listLoading" :data="menuList"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border
                  style="margin-bottom: 20px;"
        >
          <el-table-column label="序号" prop="id" width="80"></el-table-column>
          <el-table-column label="订单编号" prop="order_no"></el-table-column>
          <el-table-column label="下单用户ID" prop="user_code"></el-table-column>
          <el-table-column label="用户注册时间" prop="register_time"></el-table-column>
          <el-table-column label="游戏达人用户ID" prop="anchor_user_code"></el-table-column>
          <el-table-column label="用户渠道" prop="channel_no"></el-table-column>
          <el-table-column label="订单类型" prop="game_name">
            <template slot-scope="{row}">
              <el-tag type="success">{{ row.game_name }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="费用单价" prop="price">
            <template slot-scope="{row}">
              {{ row.price + '/' + row.unit }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="count"></el-table-column>
          <el-table-column label="支付金额（金豆）" prop="total_price"></el-table-column>
          <el-table-column label="订单状态" prop="status_name">
            <template slot-scope="{row}">
              <el-tag>{{ row.status_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="下单时间" prop="created_at"></el-table-column>
          <el-table-column label="付款时间" prop="updated_at"></el-table-column>
          <el-table-column label="接单时间" prop="took_at"></el-table-column>
          <el-table-column label="操作" prop="date" width="300">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                plain
                size="small"
                type="primary"
                @click="handleDialogShow(scope.row)"
              >查看
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      :visible.sync="visible"
      title="查看"
      width="30%"
      @close="form = {}"
    >
      <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="150px" size="normal">
        <el-form-item label="订单编号：" prop="">
          <p>{{ form.order_no }}</p>
        </el-form-item>
        <el-form-item label="下单用户：" prop="">
          <p><span class="text">用户ID：{{ form.user_code }}</span><span>用户昵称：{{ form.nickname }}</span></p>
        </el-form-item>
        <el-form-item label="游戏达人用户：" prop="">
          <p><span class="text">用户ID：{{ form.anchor_user_code }}</span><span>用户昵称：{{ form.anchor_nickname }}</span></p>
        </el-form-item>
        <el-form-item label="订单类型：" prop="">
          {{ form.game_name }}
        </el-form-item>
        <el-form-item label="费用单价：" prop="">
          {{ form.price + '/' + form.unit }}
          <!--          <p>{{ form.price }}金豆 / 局</p>-->
        </el-form-item>
        <el-form-item label="数量：" prop="">
          <p>{{ form.count }}</p>
        </el-form-item>
        <el-form-item label="支付金额：" prop="">
          <p>{{ form.total_price }}</p>
        </el-form-item>
        <el-form-item label="订单状态：" prop="">
          <p>{{ form.status_name }}</p>
        </el-form-item>
        <el-form-item label="订单评价：" prop="">
          <el-rate v-model="form.grade" :max="10" disabled show-text></el-rate>
          <div class="tagBox">
            <div v-for="(item, index) in form.comment_label" :key="index">
              <el-tag effect="dark" size="normal" type="success">{{ item }}</el-tag>
            </div>
          </div>
          <p>{{ form.comment }}</p>

        </el-form-item>
        <el-form-item label="下单时间：" prop="">
          <p>{{ form.created_at }}</p>
        </el-form-item>
        <el-form-item label="付款时间：" prop="">
          <p>{{ form.updated_at }}</p>
        </el-form-item>
        <el-form-item label="接单时间：" prop="">
          <p>{{ form.took_at }}</p>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import { accompanyList, orderList } from '@/api/playManagement'

export default {
  data() {
    return {
      form: {},
      visible: false,
      options: [
        {
          id: 0,
          name: '发起匹配'
        },
        {
          id: 1,
          name: '已接收'
        },
        {
          id: 2,
          name: '已结束'
        },
        {
          id: 3,
          name: '已结算'
        },
        {
          id: -1,
          name: '已拒绝'
        },
        {
          id: -2,
          name: '已退款'
        },
        {
          id: -3,
          name: '已取消'
        },
        {
          id: -4,
          name: '超时已取消'
        }
      ],
      options1: [],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        anchor_code: undefined,
        user_code: undefined,
        game_id: undefined,
        status: undefined,
        order_no: undefined,
        register_time: undefined
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      form: {
        id: undefined,
        name: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getList()
    this.getAccompanyList()
  },
  methods: {
    handleReset() {
      this.listQuery = {
        page: 1,
        perPage: 10,
        anchor_code: undefined,
        user_code: undefined,
        game_id: undefined,
        status: undefined,
        order_no: undefined
      }
      this.getList()
    },
    async getAccompanyList() {
      const { data } = await accompanyList({
        page: 1,
        perPage: 9999
      })
      this.options1 = data.data
    },
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] =
          this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }

      orderList(this.listQuery).then(({ data: { data, total } }) => {
        this.menuList = data
        this.total = total
        this.listLoading = false
      })
    },
    searchList() {
      this.listQuery.page = 1
      this.getList()
    },
    handleDialogShow(row) {
      this.form = JSON.parse(JSON.stringify(row))
      if (this.form.comment_label) {
        this.form.comment_label = this.form.comment_label.split(',')
      }
      this.form.grade = Number(this.form.grade)
      this.visible = true
    }
  }
}
</script>
<style lang="scss" scoped>
[v-cloak] {
  display : none;
}

.clearfix:before,
.clearfix:after {
  display : table;
  content : "";
}

.clearfix:after {
  clear : both
}

.box-card {
  width : 100%;
}

.demo-form-inline {
  float : right;
  .el-form {
    border : none;
  }
}

::v-deep {
  .el-card__header {
    padding-bottom : 0;
  }
  
  .tagBox {
    display   : flex;
    flex-wrap : wrap;

    div {
      margin-right : 10px;
    }
  }

  .el-form {
    border : 1px solid #ddd;
  }
  .demo-form-inline {
    &.el-form {
      border : none;
    }
  }
  .el-form-item {
    padding-bottom : 22px;
    border-bottom  : 1px solid #ddd;
  }

  .el-form-item:nth-child(1) {
    padding-top : 22px;
  }

  .el-form-item:last-child {
    border-bottom : none;
  }
}

.text {
  padding-right : 25px;
}
</style>
